<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Chromosomes</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
		<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
		<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'chromosome.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
        <g:javascript library="jquery" />

        <r:layoutResources />
  </head>
  <body>
    <g:render template="/main/header" />
    <div class="chromosome">
       <h1>Chromosomes</h1>
       <div class="container">
         <div class="tabs">
           <g:each in="${Organisms}" var="organism">
             <div class="tab<g:if test="${Organisms.indexOf(organism)==0}"> firstTab</g:if><g:if test="${Organisms.indexOf(organism)==(Organisms.size()-1)}"> lastTab</g:if>" id="h-${organism.name}" <g:if test="${Organisms.indexOf(organism)==0}"> style="border-bottom:1px solid white;"</g:if>>${organism.fullName}</div>
           </g:each>
         </div>
         <div class="content">
           <g:each in="${Organisms}" var="organism">
             <div class="tab-content" id="${organism.name}">
               <div class="chromDescription">
                 <div class="chromLegend">
                   <div class="allGenes">All genes on this chromosome</div>
                   <div class="foundGenes">Identified genes of this chromosome</div>
                 </div>
                 <div class="text">
                   Overview of all human chromosomes with total number of genes and genes which are identified in at least one experiment. By moving the mouse over one chromosome the identified genes for each experiment are shown. A detailed representation of the total and identified genes can be viewed by selecting a chromosome.
                 </div>
               </div>
               <g:each in="${Chromosomes[organism.name]}" var="chrom">
                 <g:link class="element" id="${chrom}" controller="ProteinChromosome" action="show" params="${[organism:organism.id]}">
                   <img src="../images/chromosomes/${organism.name}/small/small_${chrom}.jpg" alt="Chromosome ${chrom}" />
                   <div class="chromName">Chromosome ${chrom}</div>
                   <div class="chromInfo">
                     <div class="allGenes">${AllGenes[organism.name][chrom]} Genes total</div>
                     <div class="foundGenes">${FoundGenes[organism.name][chrom]} (${((FoundGenes[organism.name][chrom]*100)/AllGenes[organism.name][chrom]).toInteger()}%) identified</div>
                   </div>
                   <div class="found">
                     <div class="genes">
                       <g:set var="projNr" value="${0}" />
                       <g:each in="${Projects}" var="proj">
                         <div class="project" style="left:${((projNr*100)/Projects.size()).toInteger()}%;width:${(100/Projects.size()).toInteger()}%;height:${(FoundProjects[organism.name].containsKey(chrom))?((FoundProjects[organism.name][chrom][proj.id]!=null)?((FoundProjects[organism.name][chrom][proj.id]*100)/AllGenes[organism.name][chrom]).toInteger():0):0}%;">
                           <div class="label">
                             <div class="name">${proj.name}</div>
                             <div class="number">${(FoundProjects[organism.name].containsKey(chrom))?((FoundProjects[organism.name][chrom][proj.id]!=null)?FoundProjects[organism.name][chrom][proj.id]:0):0}</div>
                             <div class="percent">(${(FoundProjects[organism.name].containsKey(chrom))?((FoundProjects[organism.name][chrom][proj.id]!=null)?((FoundProjects[organism.name][chrom][proj.id]*100)/AllGenes[organism.name][chrom]).toInteger():0):0}%)</div>
                           </div>
                           <g:set var="projNr" value="${projNr+1}" />
                         </div>
                       </g:each>
                     </div>
                   </div>
                 </g:link>
               </g:each>
             </div>
           </g:each>
         </div>
       </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.chromDescription .text').width($('.content').width()-350);
        $(window).resize(function(){
          $('.chromDescription .text').width($('.content').width()-350);
        });
      });
    </script>
  </body>
</html>